<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>商品数量</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commNumChart" style="height: 800px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>商品价格</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commMoneyChart" style="height: 800px" />
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { listComm } from "@/api/fuw/comm";
import echarts from "echarts";

export default {
  name: "commChart",
  data() {
    return {
      // 加载层信息
      loading: [],
      // 商品数量
      commNumChart: null,
      // 商品价格
      commMoneyChart: null,
    };
  },
  created() {
    this.getList();
    this.openLoading();
  },
  methods: {
    /** 查缓存询信息 */
    getList() {
      listComm().then((response) => {
        console.log(response.rows)

        // 数据处理
        let xAxisData = []; // x轴的数据: 取所有商品名称
        let seriesDataNum = []; // 对应的数据: 取对应的商品数量
        let seriesDataMoney = []; // 对应的数据: 取对应的商品价格
        let seriesDataMoneyZheHou = []; // 对应的数据: 折后价格
        response.rows.forEach(item => {
          xAxisData.push(item.commName);
          seriesDataNum.push(item.commKucun);
          seriesDataMoney.push(item.commDanjia);
          seriesDataMoneyZheHou.push(item.commDanjia * (10 - item.commZhekou)/10);
        });

        this.commNumChart = echarts.init(this.$refs.commNumChart, "macarons");
        this.commNumChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          calculable: true,
          legend: {
            data: ['原价', '折后'],
            itemGap: 5
          },
          grid: {
            top: '12%',
            left: '1%',
            right: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: xAxisData,
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '价格/元',
            }
          ],
          dataZoom: [
            {
              show: true,
              start: 0,
              end: 100
            },
            {
              type: 'inside',
              start: 94,
              end: 100
            },
            {
              show: true,
              yAxisIndex: 0,
              filterMode: 'empty',
              width: 30,
              height: '80%',
              showDataShadow: false,
              left: '93%'
            }
          ],
          series: [
            {
              name: '原价',
              type: 'bar',
              data: seriesDataMoney
            },
            {
              name: '折后',
              type: 'bar',
              data: seriesDataMoneyZheHou
            }
          ]
        });


        this.commMoneyChart = echarts.init(this.$refs.commMoneyChart, "macarons");
        this.commMoneyChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          calculable: true,
          legend: {
            data: ['数量'],
            itemGap: 5
          },
          grid: {
            top: '12%',
            left: '1%',
            right: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: xAxisData,
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量/件'
            }
          ],
          dataZoom: [
            {
              show: true,
              start: 0,
              end: 100
            },
            {
              type: 'inside',
              start: 94,
              end: 100
            },
            {
              show: true,
              yAxisIndex: 0,
              filterMode: 'empty',
              width: 30,
              height: '80%',
              showDataShadow: false,
              left: '93%'
            }
          ],
          series: [
            {
              name: '库存',
              type: 'bar',
              data: seriesDataNum
            },
          ]
        });
      });

      this.loading.close();

    },
    // 打开加载层
    openLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "拼命读取中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
  },
};
</script>
